<template>
	<view class="content">
		<!-- <view> -->
		<!-- 二维码弹窗 -->
		<!-- 	<uni-popup ref="code" type="center">
			</uni-popup> -->
		<!-- 提示信息弹窗 -->
		<!-- 	<uni-popup ref="message" type="message">
						<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
					</uni-popup>
		</view> -->
		<!-- <view class="head">
						<uni-card :title="name" :isFull="true" :sub-title="date" :extra="week" :thumbnail="avatar">
							<text class="uni-body">中国移动：臻于至善，厚德载物</text>
						</uni-card>
		</view> -->
		<!-- <mumu-getlocation ref='muLocation'></mumu-getlocation> -->
		<!-- <view class="round1" @tap="openInfo" data-timebegin="timebegin" data-latitude="latitude" data-longitude="longitude" data-address="address">
			<view>
			<view>走访录入</view>
			<view>{{datatime}}</view>
			</view>
			
		</view> -->

		<!-- 位置定位 -->
		<!-- 	<view class="position">
			<image class="picture" src="../static/images/tabbar/v2_rn4mko.png" mode="widthFix"></image>
			<view class="address">{{address}}</view>
			<view class="change" @click="refreshaddr()">重新定位</view>
		</view> -->
		<view style="display: flex;justify-content: space-around;width: 100%;">
			<view class="flexPlay2">
				<view class="round2" :class="{highlight2:currentView==1}" @click="takeAlbum(1)">
					<view>已超时</view>
				</view>
				<view class="tag">{{tag}}</view>
			</view>
			<view class="flexPlay2">
				<view class="round3" :class="{highlight3:currentView==2}" @click="takeAlbum(2)">
					<view>未超时</view>
				</view>
				<view class="tag">{{tagTime}}</view>
			</view>
		</view>
		<!-- 走访记录 -->
		<view class="info">
			<!-- <view class="today">今日走访记录</view> -->
			<uni-section title="投诉工单" type="line" />
			<view v-for="(item,index) in list" :key="index">
				<view class="line"></view>
				<view class="info1" @tap="openDetail(item.id)">
					<view class="address">{{item.complaintAddress}}</view>
					<view class="position">{{item.problemDescription}}</view>
					<view class="time">{{item.complaintDate}}</view>
				</view>
			</view>

			<view class="load-more-box">
				<uni-load-more v-if="status == '请求中'" status="正在加载..." :showIcon="true"></uni-load-more>
				<uni-load-more v-if="status == '没有更多'" status="没有更多了" :showIcon="false"></uni-load-more>
				<uni-load-more v-if="status == '暂无数据'" status="暂无数据" :showIcon="false"></uni-load-more>
				<uni-load-more v-if="status == '请求失败'" status="加载失败，点我重试" :showIcon="false"
					@click="getList"></uni-load-more>
			</view>
		</view>

	</view>

</template>

<script>
	// 资源引入
	import amap from './common/amap-wx.130.js';
	import {
		toast
	} from "@/utils/common.js"
	import mumuGetlocation from '@/uni_modules/mumu-getlocation/components/mumu-getlocation/mumu-getlocation.vue'
	import {
		getOrders,
		receivedOrderList,
		getOvertimeWorkOrderList
	} from '@/api/index.js'

	export default {
		components: {
			mumuGetlocation
		},
		data() {
			return {
				// 信息提示弹窗
				msgType: '',
				messageText: '',
				// 高德地图实例
				amapPlugin: null,
				// 界面信息
				key: '',
				avatar: this.$store.state.user.avatar,
				name: this.$store.state.user.nickname,
				week: '星期一',
				date: '2024年1月1号',
				datatime: '00:00:00',
				address: '获取定位信息失败。。。',
				latitude: '',
				longitude: '',
				list: [],
				timebegin: '',
				locationRef: null,
				query: {
					pageNum: 1,
					pageSize: 10,
					overtimeWorkOrderFlag: '',
					processingTime: ''
				},
				status: '',
				tag: 0,
				tagTime: 0,
				currentView: 1 //默认显示已超时
			}
		},
		// computed: {
		// 	avatar() {
		// 		return this.$store.state.user.avatar
		// 	}
		// },
		onLoad: function() {
			console.log('图片路径：', this.$store.state.user.avatar)

			// 打开二维码推广
			// this.$refs.code.open()

			// #ifndef H5
			// 高德定位
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			})

			// #endif

			// #ifdef H5
			// 定位函数
			// this.getaddr()
			// #endif

			this.name = this.$store.state.user.nickname
			let that = this;
			setInterval(function() {
				that.Fun_date();
			}, 1000);


		},
		mounted() {
			// this.getList()

		},
		onShow() {

			// 获取定位信息
			// this.changeAre()
			this.query.pageNum = 1;
			this.list = [];
			this.$modal.loading("加载中，请稍等...");
			this.getList();
			this.getTag();
			this.getTime()
		},
		onPullDownRefresh() {
			this.query.pageNum = 1;
			this.list = [];
			this.getList();
		},
		onReachBottom() {
			if (this.status == '请求更多') {
				this.query.pageNum++;
				this.getList();
			}

		},
		methods: {
			changeStatus(data) {
				if (this.list.length === 0) {
					this.status = '暂无数据';
				} else if (this.query.pageNum >= Math.ceil(data.total / this.query.pageSize)) {
					this.status = '没有更多';
				} else {
					this.status = '请求更多';
				}
			},
			takeAlbum(index) {
				this.currentView = index
				uni.showLoading({
					title: '加载中...'
				});
				if (index == 1) {
					if (this.tag == 0) {
						this.list = []
						uni.showToast({
							title: '暂无超时工单',
							icon: 'none',
							duration: 2000 // 显示时间，单位ms
						});
						this.list = []
						this.changeStatus(this.list)
						uni.hideLoading();
					} else {
						this.query.overtimeWorkOrderFlag = '1'
						getOrders(this.query).then(res => {
							this.list = []
							let data = res.rows;
							this.list = this.list.concat(data || []);
							this.changeStatus(res);
						}).finally(() => {
							uni.hideLoading();
						})
					}
				} else {
					if (this.tagTime == 0) {
						this.list = []
						uni.showToast({
							title: '暂无工单',
							icon: 'none',
							duration: 2000 // 显示时间，单位ms
						});
						this.list = []
						this.changeStatus(this.list)
						uni.hideLoading();
					} else {
						this.query.overtimeWorkOrderFlag = '0'
						this.list = []
						getOrders(this.query).then(res => {
							this.list = []
							let data = res.rows;
							this.list = this.list.concat(data || []);
							this.changeStatus(res);
						}).finally(() => {
							uni.hideLoading();
						})
					}
				}


				// if (index == 1 && this.tag == 0) {
				// 	uni.showToast({
				// 		title: '暂无超时工单',
				// 		icon: 'none',
				// 		duration: 2000 // 显示时间，单位ms
				// 	});
				// } else if (index == 2 && this.tagTime == 0) {
				// 	uni.showToast({
				// 		title: '暂无工单',
				// 		icon: 'none',
				// 		duration: 2000 // 显示时间，单位ms
				// 	});
				// } else {
				// 	this.$tab.navigateTo('/pages/common/overtime/index?type=' + index)
				// }
				// this.$tab.navigateTo('/pages/common/overtime/index?type='+index)
			},
			getTag() {
				this.query.overtimeWorkOrderFlag = '1'
				getOrders(this.query).then(res => {
					this.$modal.closeLoading()
					if (res) {
						this.tag = res.total;
					}
				}).finally(() => {})
			},

			getTime() {
				// this.query.processingTime = this.Fun_date();
				this.query.overtimeWorkOrderFlag = '0'
				getOrders(this.query).then(res => {
					this.$modal.closeLoading()
					if (res) {
						this.tagTime = res.total;
					}
				}).finally(() => {})
			},
			getList() {
				if (this.currentView == '1') {
					this.query.overtimeWorkOrderFlag = '1'
				} else {
					this.query.overtimeWorkOrderFlag = '0'
				}

				this.query.processingTime = ''
				this.status = '请求中';
				uni.showLoading({
					title: '加载中...'
				});
				getOrders(this.query).then(res => {
					this.$modal.closeLoading()
					if (res) {
						let data = res.rows;
						this.list = this.list.concat(data || []);
						this.changeStatus(res);
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			// 修改请求状态
			changeStatus(data) {
				if (this.list.length === 0) {
					this.status = '暂无数据';
				} else if (this.query.pageNum >= Math.ceil(data.total / this.query.pageSize)) {
					this.status = '没有更多';
				} else {
					this.status = '请求更多';
				}
			},
			refreshaddr() {
				if (!this.locationRef) return uni.showToast({
					title: '未授权位置获取'
				})
				this.locationRef.getLocation()
					.then(res => {
						this.address = res.addr
						this.latitude = res.lat
						this.longitude = res.lng
						// console.log(JSON.stringify(res))
						this.messageToggle('success')
					})

			},
			getaddr() {
				this.$nextTick(() => {
					uni.showLoading({
						title: '定位组件加载中...',
						mask: true
					})
					this.$refs.muLocation.__init().then(location => {
						this.locationRef = location
						uni.hideLoading()
						uni.showLoading({
							title: '获取位置中...',
							mask: true
						})
						location.getLocation()
							.then(res => {
								this.address = res.addr
								this.latitude = res.lat
								this.longitude = res.lng
								// console.log(JSON.stringify(res))
								uni.hideLoading()
								this.messageToggle('success')
							})
					}, err => {
						uni.hideLoading()
						if (err.code === 1) {
							uni.showModal({
								title: '获取定位权限失败',
								content: '你拒绝了位置授权服务。请允许当前页面获取定位授权，后刷新页面。'
							})
						} else {
							uni.showModal({
								title: '获取定位权限失败',
								content: '请确定手机定位已打开，并且当前浏览器允许获取定位，都开启后请刷新页面。'
							})
						}
					})
				})
			},
			// test(){
			// 	this.$refs.code.open()
			// },
			// 提示弹窗
			messageToggle(type) {
				this.msgType = type
				this.messageText = `成功获取定位`
				this.$refs.message.open()
			},

			//获取当前时间
			Fun_date() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth(); //当前月份
				let data = date.getDate(); //天
				let hours = date.getHours(); //小时
				let minute = date.getMinutes(); //分
				let second = date.getSeconds(); //秒
				// let time = this.Fun_fnW(hours)+":"+this.Fun_fnW(minute)+":"+this.Fun_fnW(second);
				// this.datatime = time;

				// let today = year + "年" + (month+1) + "月" + data + "日"
				// this.date = today

				let daytime = `${year}-${month >= 10 ? month : '0' + month}-${data >= 10 ? data : '0' + data}`
				let week = year + "-" + this.Fun_fnW(month + 1) + "-" + this.Fun_fnW(data)
				// this.week = this.getWeekqq(week)
				return week
				// this.timebegin = year + "-" + this.Fun_fnW(month+1) + "-" + this.Fun_fnW(data) + " " + time

			},

			//当某个字段不是两位数时补0
			Fun_fnW(str) {
				let num = '';
				str >= 10 ? num = str : num = "0" + str;
				return num;
			},
			// 获取星期几
			getWeekqq(dateString) {
				var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				var myDate = new Date(dateString);
				return weekDay[myDate.getDay()]
			},
			// 打开走访录入功能
			openInfo() {
				console.log('打开走访录入功能')

				this.$tab.navigateTo('/pages/interview/watermark?timebegin=' + this.timebegin + '&latitude=' + this
					.latitude + '&longitude=' + this.longitude + '&address=' + this.address)

			},
			// 打开详情页面
			openDetail(id) {
				this.$tab.navigateTo('/pages/common/textview/index?id=' + id)

				// this.$tab.navigateTo('/pages/home/change?id='+id)
			},
			// 重新定位
			changeAre() {
				console.log('重新定位功能')

				this.amapPlugin.getRegeo({
					success: (data) => {
						uni.hideLoading();
						this.messageToggle('success')

						// console.log(data)

						this.address = data[0].regeocodeData.formatted_address;
						this.latitude = data[0].latitude
						this.longitude = data[0].longitude
					},
					fail: (res) => {
						uni.hideLoading()

						// console.log(res);
						toast('定位获取失败')
					}
				});


			}
		},


	}
</script>

<style>
	page {
		background-color: white;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.head {
		width: 100%;
	}

	.round1 {
		margin-top: 100upx;
		width: 350upx;
		height: 350upx;
		background-color: #2dcabe;
		border: 20upx solid;
		border-color: #def9f5;
		border-radius: 100%;
		color: white;
		font-size: 50upx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}



	.picture {
		width: 50upx;
		height: 50upx;
	}

	/*  .address {
		color: gray;
		width: 400upx;
		border-left: 10upx;
		padding-left: 10upx;
		padding-right: 20upx;
	}
	 */
	.change {
		font-weight: bold;
		color: #12a98e;
	}

	.info {
		margin-top: 20upx;
		width: 100%;
		color: #6a6a6a;
	}

	.today {
		margin-top: 25upx;
		margin-left: 70upx;
		color: #6a6a6a;
	}

	/deep/.uni-section .uni-section-header__decoration {
		background-color: #12a98e;
	}

	.line {
		border-bottom: 1upx solid;
		border-color: lightgray;
		width: 94%;
		height: 1upx;
		margin-top: 5upx;
		margin-left: 3%;
	}


	.info1 {
		margin-top: 20upx;
		margin: 20upx 3% 0;
	}

	.address {
		color: #12a98e;
		font-size: 21px;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.time {
		font-size: 18px;
		margin: 16upx 0;
		text-align: right;
	}

	.position {
		margin-top: 20upx;
		font-size: 18px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.flexPlay2 {
		position: relative;
		width: 46%;
	}

	.highlight2 {
		box-shadow: 0 4px 20px rgba(55, 55, 55, 0.1);
		border: 1px solid rgba(55, 55, 55, 0.5);
		filter: brightness(120%);
	}

	.round2 {
		width: 90%;
		margin: 20rpx auto;
		height: 100upx;
		background-color: #f89898;
		/* border-radius:100%; */
		color: white;
		font-size: 50upx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.highlight3 {
		box-shadow: 0 4px 20px rgba(55, 55, 55, 0.1);
		border: 1px solid rgba(55, 55, 55, 0.5);
		filter: brightness(120%);
	}

	.round3 {
		width: 90%;
		margin: 20rpx auto;
		height: 100upx;
		background-color: #eebe77;
		/* border-radius:100%; */
		color: white;
		font-size: 50upx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tag {
		position: absolute;
		top: 6rpx;
		right: 10rpx;
		line-height: 60rpx;
		width: 70rpx;
		text-align: center;
		background-color: red;
		color: #fff;
		border-radius: 50%;
		font-size: 35rpx;
		font-weight: bold;
	}
</style>